<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            overflow: auto;
            background-color: #bbffaa;
            background-image: url("../exercise/img/1.jpg");
            background-repeat: no-repeat;
            background-position: 0 0 ;
            padding: 10px;
            /*
                设置背景的范围
                background-clip
                    可选值:
                    border-box默认值,背景会出现在边框的下边
                    padding-box背景不会出现在边框,只出现在内容区和内边距
                    content-box 背景只会出现在内容区

                background-origin 背景图片的偏移量计算的原点
                    padding-box 默认值 background-position从内边距处开始计算
                    context-box 背景图片的偏移量从内容区处计算
                    border-box 背景图片的偏移量从边框处开始计算

             */
            background-origin: border-box;
            background-clip: content-box;
            /*border: 10px red double;*/
            /*
                background-size：设置背景图片的大小
                    第一个值表示宽度
                    第二个值表示高度
                        -如何只写一个,则第二个值默认是auto

                   cover 图片比例不变,将元素铺满
                   contain 图片比例不变,将图片在元素中完整显示
             */
            background-size: contain;
        }
        .box2{
            width: 300px;
            height: 1000px;
            /*background-color: orange;*/
            background-image: url("../exercise/img/1.jpg");
            background-repeat: no-repeat;
            background-position: 100px 100px;
            /*
                background-attachment
                        -背景图片是否跟随元素移动
                        -可选值:
                            scroll默认值 背景图片会跟随元素移动
                            fixed 背景图片会固定在页面中,不会随元素移动
             */
            background-attachment: fixed;
        }

        /*
            backgroud 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
            并且没有顺序要求,也没有哪个属性必须写

             注意:backgroud-size必须卸载backgroud-position后面 并且使用/隔开
                backgroud-postion/backgrou-size

                backgroud-origin backgroud-clip两个样式,origin要在clip的前面
         */
        .box3{
            width: 500px;
            height: 1000px;
            padding: 50px;
            border: 10px double red;
            background: #bfa url("../exercise/img/1.jpg") center center/contain border-box content-box no-repeat;
        }
    </style>
</head>
<body>
<!--<div class="box1">-->
<!--    <div class="box2" style="height: 1000px">abcabcabcabcabcabcabcabcabc-->
<!--        abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc-->
<!--        abcabcabc</div>-->
<!--</div>-->
    <div class="box3"></div>
</body>
</html>